<template>
  <div class="new-page">
    <el-container>
      <el-header class="graybackground">
        <el-row>
          <el-col :span="8"><el-page-header @back="goBack" content="新建页面">  </el-page-header></el-col>
        </el-row>
      </el-header>
      <el-container class="pt20 wd900" style="margin: auto;">
         <el-main class="wd900">
           <el-tabs v-model="activeName">
             <el-tab-pane label="空白项目" name="new" class="height560">
               <div class="mt20">
                 <el-input v-model="pageName" class="font14" minlength="3" maxlength="64" placeholder="给页面取个好记的名字吧"></el-input>
               </div>
                <div class="mt20 text-left">
                    <div class="mt20">
                      <div class="type-card margin-right20" :class="{'active-card':pageType==='phone'}" @click="setingPageType('phone')">
                        <span class="icon iconfont icon-phone font44"></span>
                         手机
                      </div>
                      <div class="type-card margin-right20" :class="{'active-card':pageType==='pad'}"  @click="setingPageType('pad')">
                        <span class="icon iconfont icon-pad font44"></span>
                        平板
                      </div>
                      <div class="type-card" :class="{'active-card':pageType==='web'}"  @click="setingPageType('web')">
                        <span class="icon iconfont icon-web font44"></span>
                        网页
                      </div>
                    </div>
                    <div class="mt20">
                      <div class="type-card margin-right20" :class="{'active-card':pageType==='screen-4-3'}" @click="setingPageType('screen-4-3')">
                        <span class="icon iconfont icon-screen4-3 font44"></span>
                        大屏(4:3)
                      </div>
                      <div class="type-card margin-right20" :class="{'active-card':pageType==='screen-16-9'}" @click="setingPageType('screen-16-9')">
                        <span class="icon iconfont icon-screen16-9 font44"></span>
                        大屏(16:9)
                      </div>
                      <div class="type-card" :class="{'active-card':pageType==='screen-custom'}" @click="setingPageType('screen-custom')">
                        <span class="el-icon-edit-outline font44"></span>
                        大屏(自定义)
                      </div>
                    </div>
                </div>
               <div class="mt20">
                 <el-button class="width50" type="primary">立即创建</el-button>
               </div>
             </el-tab-pane>
             <el-tab-pane label="从模板中创建项目" name="template">正在加紧研发中....</el-tab-pane>
           </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'NewPage',
  data () {
    return {
      activeName: 'new',
      pageName: '',
      pageType: 'screen-4-3'
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    setingPageType (type) {
      this.pageType = type
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.new-page {
  height: 100%;
  width: 100%;
}
.new-page .el-container{
  height: 100%;
}
  .type-card{
      width: 270px;
      height: 160px;
      line-height: 160px;
      text-align: center;
      display: inline-block;
      border: 1px solid #dedee4;
      border-radius: 4px;
      box-shadow: 0 1px 4px 0 #dedee4;
      cursor: pointer;
      transition: all 0.15s ease-out;
  }
  .type-card.active-card{
    border-color: #409EFF!important;
    box-shadow: 0 1px 4px 0 #409EFF!important;
  }
  .font44{
    color: #dedee4;
    font-size: 32px;
  }
</style>
